import {Button, Card, Descriptions } from "antd";
import { reqGetHospitalById } from '@api/hospital/hospitalList';
import { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import type {ShowHospitalType} from "@api/hospital/model/hospitalListtypes";


export default function ShowHospital() {
    const [hospital, sethospital] = useState<ShowHospitalType>({
        hospital: {
            hosname: "",
            logoData: "",
            cityCode: "",
            param:{fullAddress: ""},
            route: "",
            intro: "",
        },
        bookingRule: {
            cycle: "",
            releaseTime: "",
            stopTime: "",
            quitTime: "",
            rule: [""],
        }})

    const params = useParams()
    const id = params.id as string

    const showHospital = async (id:string) => {
        const hospital = await reqGetHospitalById(id)
        sethospital(hospital)
    };

    useEffect(
        () => {
            showHospital(id)
        }
    ,[])
    const navigate = useNavigate()
    const goback = () => {
        navigate('/syt/hospital/hospitalList')
    }
    return (
        <Card>
            <Descriptions title="基本信息" bordered column={4}>
                <Descriptions.Item label="医院名称" span={2}>{hospital.hospital.hosname}</Descriptions.Item>
                <Descriptions.Item label="医院logo" span={2}><img style={{ width: 100, height: 100 }} src={`data:image/jpeg;base64,${hospital.hospital.logoData}`} /></Descriptions.Item>
                <Descriptions.Item label="医院编码" span={2}>{hospital.hospital.cityCode}</Descriptions.Item>
                <Descriptions.Item label="医院地址" span={2}>{hospital.hospital.param.fullAddress}</Descriptions.Item>
                <Descriptions.Item label="坐车路线" span={4}>{hospital.hospital.route}</Descriptions.Item>
                <Descriptions.Item label="医院简介" span={4}>{hospital.hospital.intro}</Descriptions.Item>
            </Descriptions>
            <Descriptions title="预约规则信息" bordered column={4}>
                <Descriptions.Item label="预约周期" span={2}>{hospital.bookingRule.cycle}</Descriptions.Item>
                <Descriptions.Item label="放号时间" span={2}>{hospital.bookingRule.releaseTime}</Descriptions.Item>
                <Descriptions.Item label="停挂时间" span={2}>{hospital.bookingRule.stopTime}</Descriptions.Item>
                <Descriptions.Item label="退号时间" span={2}>{hospital.bookingRule.quitTime}</Descriptions.Item>
                <Descriptions.Item label="预约规则" span={4}>{hospital.bookingRule.rule.map((a,index) => {
                    return <div key={index}>{`${index + 1}.${a}`}</div>
                })}</Descriptions.Item>
            </Descriptions>
            <Button onClick={goback} style={{marginTop:30}}>返回</Button>
        </Card>
    )
}